<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .borderRed {border:solid 1px red;}
        span {color: red;display: none;}
        </style>
</head>
<body>
    <!-- <form action="提交.html"> -->
    <form>
        <div>
            用户名
            <input type="text" id="username">
            <!-- <input type="text" class="red"> -->
            <span>x用户名有误</span>
        </div>
    
        <div>
            手机号
            <input type="text" id="mobile">
            <span>x手机号有误</span>
        </div>
    
        <div>
            密码
            <input type="text" id="pwd">
            <span>x密码有误</span>
        </div>
    
    
        <div>
            验证码
            <input type="text" id="captcha">
            <span>x验证码有误</span>
        </div>
    
    
        <div>
            协议
            <input type="checkbox" id="agree">
        </div>
    
        <div>
            <input type="submit" value="注册">
        </div>
    </form>



    <script>
        let btn = document.querySelector('input[type="submit"]')
        let val1 = document.querySelector('#username')
        let val2 = document.querySelector('#mobile')
        let val3 = document.querySelector('#pwd')
        let val4 = document.querySelector('#captcha')
        let spans = document.querySelectorAll('span')
        let inputs = document.querySelectorAll('input')
        // spans[0].style.display = 'inline-block'
        
        // 封装函数
        let panding = function(newregexp,i,evt) {
            let e = evt || window.event;
            console.log(e)
            if(newregexp.test(e.value)) {
                console.log(i)
                spans[i].style.display= inline-block
                return
            }
        }
        // let xxx = 
        val1.addEventListener(oninput,panding(/^123$/,0),false)

        // val1.oninput = function() {
        //     if(/^\w{2,10}$/.test(this.value)) {
        //         spans[0].style.display = 'none'
                
        //     }else {
        //         spans[0].style.display = 'inline-block'
        //     }
        // }
        
        // val2.oninput = function() {
        //     if(/^1\d{10}$/.test(this.value)) {
        //         spans[1].style.display = 'none'
                
        //     }else {
        //         spans[1].style.display = 'inline-block'
        //     }
        // }

        // val3.oninput = function() {
        //     if(/^\w{2,10}$/.test(this.value)) {
        //         spans[2].style.display = 'none'
                
        //     }else {
        //         spans[2].style.display = 'inline-block'
        //     }
        // }

        // val4.oninput = function() {
        //     if(/^\d{4}$/.test(this.value)) {
        //         spans[3].style.display = 'none'
                
        //     }else {
        //         spans[3].style.display = 'inline-block'
        //     }
        // }
        

    </script>
</body>
</html>